<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>基础框架平台服务前端预览中心-报表服务</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-table.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-table-fixed-columns.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-editable.css" rel="stylesheet" />
    <link href="bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="css/docs.css" rel="stylesheet" />
    <link href="css/pygments-manni.css" rel="stylesheet" />
</head>
<body style="background-color: #F1F3FA;">
    <nav class="navbar navbar-default" style="margin-top:5px; margin-bottom:5px;">
        <div class="container-fluid">
            <div class="navbar-header" style="font-size:16px; padding-top:8px;">
                <span style="font-size: 23px; border: solid 1px #DDDDDD; padding:0px 5px; margin-right:25px; float:left;">报表服务</span>
                <span id="sp_seviceUrl" style="float:left; padding-top:6px; font-size:15px;"></span>
            </div>
        </div>
    </nav>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">报表预览</a></li>
        <!-- <li role="presentation"><a href="#field" aria-controls="profile" role="tab" data-toggle="tab">字段预览</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">数据预览</a></li> -->
        <li role="presentation"><a href="#serviceAPI" aria-controls="profile" role="tab" data-toggle="tab">报表服务API</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active" id="home">
            <div class="panel panel-primary">
                <div class="panel-heading">报表预览</div>
                <div class="panel-body">
                    <div class="container-fluid">
                        <div id="toolbar" class="form-inline">
                            <div id="txtSearch" class="form-group">
                            </div>
                            <button id="btn_search" type="button" class="btn btn-success">查询</button>
                            <div class="btn-group">
							    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">导出
							        <span class="caret"></span>
							    </button>
							    <ul class="dropdown-menu" role="menu">
							        <li>
							            <a href="javascript:;" onclick="commServices.prototype.reportExport('pdf');">PDF</a>
							        </li>
							        <li>
							            <a href="javascript:;" onclick="commServices.prototype.reportExport('word');">WORD</a>
							        </li>
							        <li>
							            <a href="javascript:;" onclick="commServices.prototype.reportExport('excel');">EXCEL</a>
							        </li>
							    </ul>
							</div>
                        </div>
                        <br>
                        <iframe id="sysIframe"  name="sysIframe"  style="width:100%; border:solid 0px red;" src=""></iframe>
                        <!-- <table id="tb_list"></table> -->
                    </div>
                </div>
            </div>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="serviceAPI">
            <div class="panel panel-primary">
                <div class="panel-heading">报表服务API</div>
                <div id="tb_data" class="panel-body">
                    <h4>报表预览服务</h4>
                    <div class="bs-callout bs-callout-warning">
                        <h4>服务地址</h4>
                        <p  id="reportView">
                        	<a href=""  target="_blank"><span class="p_url"></span></a>
                        </p>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <h4>参数说明</h4>
                        <table class="table table-bordered table-striped js-options-table">
                            <thead><tr><th>名称</th><th>类型</th><th>说明</th></tr></thead>
                            <tbody>
                                <tr>
                                    <td>serviceID</td>
                                    <td>String</td>
                                    <td>服务ID</td>
                                </tr>
                                <!-- <tr>
                                    <td>pageNO</td>
                                    <td>int</td>
                                    <td>当前页数,从1开始(默认值1)</td>
                                </tr> -->
                                <tr>
                                    <td>conQuery</td>
                                    <td>string</td>
                                    <td>查询条件,格式为{"key":"value","key":"value","key":"value"};
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <h4>调用说明</h4>
                        <p>使用Iframe调用服务地址的方式来展示报表</p>
                        <figure class="highlight">
                        <pre>
                        <code class="language-js" data-lang="js">
<span class="c1">//iframe调用实例，%7B%7D为{}的转译编码</span>
$("#sysIframe").attr("src",<span id="preview_url"></span>);
                 
                        </code>
                       </pre>
                      </figure>
                    </div>
                    <h4>报表导出服务</h4>
                    <div class="bs-callout bs-callout-warning">
                        <h4>服务地址</h4>
                        <p id="reportExport" >
                        	<a href=""  target="_blank"><span class="p_url"></span></a>
                        </p>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <h4>参数说明</h4>
                        <table class="table table-bordered table-striped js-options-table">
                            <thead><tr><th>名称</th><th>类型</th><th>说明</th></tr></thead>
                            <tbody>
                                <tr>
                                    <td>serviceID</td>
                                    <td>String</td>
                                    <td>服务ID</td>
                                </tr>
                                <tr>
                                    <td>style</td>
                                    <td>String</td>
                                    <td>导出样式,现支持pdf、word、excel</td>
                                </tr>
                                <tr>
                                    <td>conQuery</td>
                                    <td>string</td>
                                    <td>查询条件,格式为{"key":"value","key":"value","key":"value"};
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <h4>调用说明</h4>
                        <p>使用window.location.href来调用后台服务下载报表文件</p>
                        <figure class="highlight">
                            <pre>
                               <code class="language-js" data-lang="js">
<span class="c1">//报表服务导出</span>
      window.location.href=http://127.0.0.1:8080/frame-main-web/business/reportExport/reportView?serviceID=<span class="s_id"></span>&conQuery=%7B"unit":"艾力泰尔"%7D);
                            </code></pre>
                        </figure>
                    </div>
                    <h4>报表查询参数服务</h4>
                    <div class="bs-callout bs-callout-warning">
                        <h4>服务地址</h4>
                        <p id="reportParam" >
                        	<a href=""  target="_blank"><span class="p_url"></span></a>
                        </p>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <h4>参数说明</h4>
                        <table class="table table-bordered table-striped js-options-table">
                            <thead><tr><th>名称</th><th>类型</th><th>说明</th></tr></thead>
                            <tbody>
                                <tr>
                                    <td>serviceID</td>
                                    <td>String</td>
                                    <td>服务ID</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="bs-callout bs-callout-info">
                        <h4>调用说明</h4>
                        <p>使用ajax调用，支持get请求,返回Json数据格式{"result":"查询结果状态码(0成功,1失败)","message":"查询结果信息","data"[{"fieldname":"字段英文名称","fieldnamecn":"字段中文名称","fieldtype":"字段数据类型","showtype":"显示类型","enumbalue":"显示默认值"}]}</p>
                        <figure class="highlight">
                            <pre><code class="language-js" data-lang="js">
<span class="c1">//ajax调用实例</span>
      $.ajax({
            url: <span class="s">'<span class="s_url"></span>/business/reportServer/queryReportQueryParams'</span>,
            type: <span class="s">'get'</span>,
            async: false,
            data: { serviceID: <span class="s">'<span class="s_id"></span>'</span> },
            dataType: "json",
            success: function (data) {
                   <span class="c1">//data返回Json格式的数据{"result":"查询结果状态码(0成功,1失败)","message":"查询结果信息","data":[{"fieldname":"字段英文名称","fieldnamecn":"字段中文名称","fieldtype":"字段数据类型","showtype":"显示类型","enumbalue":"显示默认值"}]}</span>
                   <span class="c1">//showtype(0文本框,1下拉框,2单选按钮,3复选框,4日期框); enumbalue(显示默认值，格式为:key:value,key:value)</span>          
            },
            error: function () {
                
            }
        });
                            </code></pre>
                        </figure>
                    </div>

                </div>
            </div>
        </div>


    </div>

    <!-- Begin数据维护modal -->
    <div id="EditContent" class="modal fade" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title">数据维护</h4>
                </div>
                <div class="modal-body">
                    <div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible1="1">
                        <div id="editTxt" class="form-horizontal form-body">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn default">关闭</button>
                    <button id="btn_save" type="button" class="btn blue">保存</button>
                </div>
            </div>
        </div>
    </div>
    <!-- End数据维护modal -->
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/bootstrap-table.min.js"></script>
    <script src="bootstrap/js/bootstrap-table-zh-CN.js"></script>
    <script src="bootstrap/js/bootbox.min.js"></script>
    <script src="bootstrap/js/bootstrap-datetimepicker.min.js"></script>
    <script src="bootstrap/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script src="js/services/serviceConfig.js"></script>
    <script src="js/services/reportServer.js"></script>
    <script src="js/docs.js"></script>
</body>
</html>
